<ion-content fullscreen>
  <div class="search-title" style="background: #4D4D4D;opacity: 0.9;">
    <span style="display: inline-block; height: 40px;"></span>
    <img (click)="back()" src="../../../../assets/img/return.png" alt="">
    <div class="search">
      <img src="../../assets/img/index/sousuo.png" alt="">
      <ion-input type="search" [(ngModel)]="searchValue" (ionChange)='searchChange()' placeholder="Search Product">
      </ion-input>
    </div>
    <ion-label (click)="onClickBtn()">{{btn}}</ion-label>
  </div>
  <div style="font-size: 1.1rem;margin-left: 20px;padding-top: 10px;" *ngIf="searchValueInfo">
    <ion-label>History</ion-label>
    <img (click)="onClickDelect()" style="float: right;padding-right: 20px; width: 40px;" src="../../../../assets/img/delete.png" alt="">
  </div>
  <div style="padding: 0 10px;">
    <span
      style="text-align: center;padding: 5px; color: #888888; width: 20%; display: inline-block;overflow: hidden!important;text-overflow: ellipsis!important;white-space: nowrap;"
      *ngFor="let item of searchValueInfo" (click)="onClickBtn2(item)">{{item}}</span>
  </div>
  <div style="font-size: 1.1rem;margin-left: 20px;">
    <ion-label>Popular searches </ion-label>
  </div>
  <div style="padding: 10px;">
    <span
      style="text-align: center;padding: 5px;  width: 20%; display: inline-block;overflow: hidden!important;text-overflow: ellipsis!important;white-space: nowrap;"
      *ngFor="let item of array" (click)="onClickBtn1(item)">{{item.procName}}</span>
  </div>
</ion-content>